<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .testClass{
            width:300px;
            height:300px;
        }
 
        .bgcRed{
            background-color:red;
        }
        .bgcGreen{
            background-color:green;
        }
    </style>
    <script type="text/javascript">
        function ChangeDivShow(imgObj)
        {
            var divObj = document.getElementById("testId");
 
            //这里的判断的很巧妙，以div的display为因 去改变 显示的图片
            //还可以有另外一种方法就是 以img的src为因 去改变 div的display。
            //显然第一种更加优秀！
            //程序 逻辑 思维 选择 不实践 不出真章！
 
 
            //判断divObj的display的值
            if(divObj.style.display=="block")
            {
                divObj.style.display = "none";
                imgObj.src = "images/none.jpg";
            }
            else
            {
                divObj.style.display = "block";
                imgObj.src = "images/block.jpg";
            }
 
        }
    </script>
</head>
<body>
    <img src="images/block.jpg" onclick="ChangeDivShow(this)" />
    <div class="testClass bgcRed" id="testId" style="display:block;"><!--刚开始我在CSS中写的display，结果出现小的bug。现在在这里添加style属性，就OK来了。--></div>
    <div class="testClass bgcGreen">
    </div>
</body>
</html>